<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<scroll-view class="nav-scroll" scroll-x="true" show-scrollbar="false">
				<view class="nav-items">
					<view v-for="(nav, index) in navList" :key="index" class="nav-item"
						:class="{ active: currentNav === nav.key }" @click="switchNav(nav.key)">
						<text class="nav-text">{{ nav.name }}</text>
						<view class="nav-indicator" v-if="currentNav === nav.key"></view>
					</view>
				</view>
			</scroll-view>

			<!-- 天气 -->
			<view class="weather-info">
				<text class="weather-temp">4℃小雨</text>
				<text class="weather-location">桂林 PM2.59</text>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-container">
				<view class="search-icon">🔍</view>
				<input class="search-input" placeholder="搜索关键词" placeholder-class="placeholder" v-model="searchKeyword"
					@confirm="handleSearch" />
				<view class="search-actions">
					<text class="search-action" @click="handleScan">扫码</text>
					<text class="search-action" @click="handleVoice">语音</text>
				</view>
			</view>
		</view>

		<view class="update-notice" v-if="showUpdateNotice">
			<text class="notice-text">为您更新了{{ updateCount }}条内容</text>
			<text class="notice-time">{{ currentTime }}</text>
			<text class="notice-close" @click="closeUpdateNotice">×</text>
		</view>

		<!-- 内容 -->
		<scroll-view class="content-wrapper" scroll-y="true" :refresher-enabled="true"
			:refresher-triggered="refresherTriggered" @refresherrefresh="onRefresherRefresh"
			@refresherrestore="onRefresherRestore" @refresherabort="onRefresherAbort">
			<view class="content">
				<view v-for="(item,index) in filteredData" :key="item.id" class="card-wrapper">
					<!-- 无图模式 (modetype: 1) -->
					<NewsView v-if="item.modetype === 1" :card-info="item" :title="item.title" :isTop="item.isTop"
						:author="item.author" :comments="item.comments" :time="item.time" :index="index"
						:modetype="item.modetype" @itemClick="handleNewsClick" @itemAction="handleNewsAction">
					</NewsView>

					<!-- 单图模式 (modetype: 2) -->
					<NewsView v-else-if="item.modetype === 2" :card-info="item" :title="item.title"
						:isTop="item.isTop" :author="item.author" :comments="item.comments" :time="item.time"
						:index="index" :modetype="item.modetype" @itemClick="handleNewsClick"
						@itemAction="handleNewsAction">
						<template v-slot:image>
							<view class="single-image-container">
								<image class="single-image" :src="getImageUrl(item.imageUrl)" mode="aspectFill"></image>
							</view>
						</template>
					</NewsView>

					<!-- 多图模式 (modetype: 3) -->
					<NewsView v-else-if="item.modetype === 3" :card-info="item" :title="item.title"
						:isTop="item.isTop" :author="item.author" :comments="item.comments" :time="item.time"
						:index="index" :modetype="item.modetype" @itemClick="handleNewsClick"
						@itemAction="handleNewsAction">
						<template v-slot:images>
							<view class="multi-images-container">
								<view v-for="(img, imgIndex) in getMultiImages(item.images)" :key="imgIndex"
									class="multi-image-item">
									<image class="multi-image" :src="getImageUrl(img)" mode="aspectFill"></image>
								</view>
							</view>
						</template>

						<!-- 广告插槽 -->
						<template v-slot:footer v-if="item.isAd">
							<view class="ad-section" :style="{ background: item.bgColor }">
								<view class="ad-content">
									<view class="ad-text">
										<text class="ad-title">{{ item.adTitle }}</text>
										<text class="ad-desc">{{ item.adDesc }}</text>
									</view>
									<view class="ad-tag">广告</view>
								</view>
							</view>
						</template>
					</NewsView>
				</view>

				<view class="load-more" v-if="isLoading">
					<text class="load-more-text">加载中...</text>
				</view>
				<view class="no-more" v-if="!hasMore">
					<text class="no-more-text">没有更多内容了</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-tabbar">
			<view v-for="(tab, index) in tabbarList" :key="index" class="tab-item"
				:class="{ active: currentTab === tab.key }" @click="switchTab(tab.key)">
				<text class="tab-icon">{{ tab.icon }}</text>
				<text class="tab-text">{{ tab.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import NewsView from "../../../components/NewsView.vue"
	export default {
		name: "newsPage",
		components: {
			NewsView
		},
		data() {
			return {
				navList: [{
						key: 'hot',
						name: '要闻'
					},
					{
						key: 'recommend',
						name: '推荐'
					},
					{
						key: 'follow',
						name: '关注'
					},
					{
						key: '24h',
						name: '24小时'
					},
					{
						key: 'entertainment',
						name: '娱乐'
					},
					{
						key: 'finance',
						name: '财经'
					}
				],
				currentNav: 'hot',

				searchKeyword: '',

				showUpdateNotice: true,
				updateCount: 15,
				currentTime: this.formatTime(new Date()),

				// 下拉刷新
				refresherTriggered: false,
				isLoading: false,
				hasMore: true,

				// 底部标签栏
				tabbarList: [{
						key: 'home',
						name: '首页',
						icon: '🏠'
					},
					{
						key: 'video',
						name: '视频',
						icon: '🎬'
					},
					{
						key: 'topic',
						name: '话题',
						icon: '💬'
					},
					{
						key: 'mine',
						name: '我的',
						icon: '👤'
					}
				],
				currentTab: 'home',

				cardData: [
					// 置顶新闻 - 无图
					{
						id: 1,
						modetype: 1, // 无图
						title: "2020，我们温暖的记忆",
						isTop: true,
						author: "新闻联播",
						comments: 405,
						time: "2025.10.28",
						showSearch: false
					},
					{
						id: 2,
						modetype: 1, //无图
						title: "森林大县57年无大火是怎么做到的",
						isTop: true,
						author: "光明网",
						comments: 234,
						time: "2025.10.28",
						showSearch: false,
					},
					// 普通新闻 - 单图 
					{
						id: 3,
						modetype: 2, //有图
						title: "社评：欧洲的焦虑不该由中国电动大巴“背锅”",
						isTop: false,
						author: "环球网资讯",
						comments: 1706,
						time: "2025-11-10",
						showSearch: false,
						imageUrl: "/static/news-image1.png"
					},
					// 普通新闻 - 单图 
					{
						id: 4,
						modetype: 2, //有图
						title: "7.8吨冷冻猪脚“失踪”疑云：从广西运往广东竟在河南被扣押丨封面深镜",
						isTop: false,
						author: " 封面新闻 ",
						comments: 285,
						time: "2025-11-11",
						showSearch: false,
						imageUrl: "/static/news-image2.png"
					},
					// 广告 - 多图 
					{
						id: 5,
						modetype: 3, //有多张图
						title: "科技与匠心，绘就全运坦途——记广州交通人备战十五运会的日与夜",
						isTop: false,
						author: "新快报新闻 ",
						comments: 770,
						time: "2025-11-11",
						showSearch: false,
						isAd: true,
						bgColor: "#aaffff",
						adTitle: "科技",
						adDesc: "汽车",
						images: [
							"/static/ad-image1.png",
							"/static/ad-image2.png",
							"/static/ad-image3.png"
						]
					},
					// 多图新闻 
					{
						id: 6,
						modetype: 3, //有多张图
						title: "幼儿园园长贪污千万案二审再开庭：一审被判11年，是否“租赁园”引争论",
						isTop: false,
						author: "澎湃新闻 ",
						comments: 6824,
						time: "2025-11-10",
						showSearch: false,
						images: [
							"/static/image4.jpg",
							"/static/image5.jpg",
							"/static/image6.jpg"
						]
					},
					// 多图新闻 
					{
						id: 7,
						modetype: 3, //有多张图
						title: "5岁女童玩水疑触电住进ICU？景区回应：设备合规，涉事项目已停用",
						isTop: false,
						author: "封面新闻 ",
						comments: 125,
						time: "2025-11-10",
						showSearch: false,
						images: [
							"/static/image7.png",
							"/static/image8.png",
							"/static/image9.png"
						]
					}
				]
			};
		},
		computed: {
			filteredData() {
				return this.cardData;
			}
		},
		methods: {
			// 默认图片
			getImageUrl(imageUrl) {
				return imageUrl || '/static/图片加载错误.png';
			},

			// 处理多图数组
			getMultiImages(images) {
				if (!images || !Array.isArray(images)) {
					// 采用默认图片
					return [null, null, null];
				}

				// 确保数组有3个元素，不足的用null填充
				const result = [...images];
				while (result.length < 3) {
					result.push(null);
				}
				return result.slice(0, 3); // 只取前3张
			},

			// 切换导航
			switchNav(navKey) {
				this.currentNav = navKey;
				this.showToast(`切换到: ${this.navList.find(nav => nav.key === navKey)?.name}`);
			},

			// 切换标签页
			switchTab(tabKey) {
				this.currentTab = tabKey;
			},

			// 搜索处理
			handleSearch() {
				if (this.searchKeyword.trim()) {
					this.showToast(`搜索: ${this.searchKeyword}`);
				}
			},

			// 扫码功能
			handleScan() {
				uni.scanCode({
					success: (res) => {
						this.showToast(`扫描结果: ${res.result}`);
					},
					fail: () => {
						this.showToast('扫码失败', 'error');
					}
				});
			},

			// 语音搜索
			handleVoice() {
				this.showToast('语音搜索功能');
			},

			// 关闭更新提示
			closeUpdateNotice() {
				this.showUpdateNotice = false;
			},

			// 新闻点击
			handleNewsClick(data) {
				console.log('新闻点击:', data);
				this.showToast(`查看: ${data.title.substring(0, 10)}...`);
			},

			// 新闻操作
			handleNewsAction(data) {
				console.log('新闻操作:', data);
				const actionText = {
					'share': '分享',
					'collect': '收藏',
					'report': '举报'
				} [data.action];
				this.showToast(`已${actionText}`);
			},

			showToast(message, type = 'info') {
				uni.showToast({
					title: message,
					icon: type === 'error' ? 'error' : 'none',
					duration: 2000
				});
			},

			// 格式化时间
			formatTime(date) {
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},

			// 下拉刷新
			onRefresherRefresh() {
				console.log('下拉刷新触发');
				this.refresherTriggered = true;
				this.refreshData();
			},

			onRefresherRestore() {
				console.log('刷新状态被重置');
				this.refresherTriggered = false;
			},

			onRefresherAbort() {
				console.log('刷新被中止');
				this.refresherTriggered = false;
			},

			// 刷新数据方法
			async refreshData() {
				try {
					this.isLoading = true;
					await new Promise(resolve => setTimeout(resolve, 1500));

					const newData = [{
							id: Date.now(),
							modetype: 1, // 无图
							title: `最新新闻 - ${this.formatTime(new Date())}`,
							isTop: false,
							author: "最新发布",
							comments: Math.floor(Math.random() * 100),
							time: "2025.10.28",
							showSearch: false
						},
						{
							id: Date.now() + 1,
							modetype: 2, // 单图
							title: "实时热点：科技创新推动高质量发展",
							isTop: true,
							author: "科技日报",
							comments: 156,
							time: "2025.10.28",
							showSearch: false
						}
					];

					this.cardData = [...newData, ...this.cardData];
					this.updateCount = newData.length;
					this.showUpdateNotice = true;
					this.currentTime = this.formatTime(new Date());
					this.showToast(`已更新${newData.length}条内容`);

				} catch (error) {
					console.error('刷新数据失败:', error);
					this.showToast('刷新失败', 'error');
				} finally {
					this.isLoading = false;
					this.refresherTriggered = false;
				}
			},

			// 加载更多数据
			async loadMoreData() {
				if (this.isLoading || !this.hasMore) return;

				try {
					this.isLoading = true;
					await new Promise(resolve => setTimeout(resolve, 1000));

					const moreData = [{
							id: Date.now() + Math.random(),
							modetype: 1, // 无图
							title: "加载更多内容 - 社会民生动态",
							isTop: false,
							author: "综合新闻",
							comments: Math.floor(Math.random() * 50),
							time: "2025.10.28",
							showSearch: false
						},
						{
							id: Date.now() + Math.random(),
							modetype: 3, // 多图
							title: "文化传承与创新发展的新路径",
							isTop: false,
							author: "文化周刊",
							comments: Math.floor(Math.random() * 80),
							time: "2025.10.28",
							showSearch: false
						}
					];

					this.cardData = [...this.cardData, ...moreData];
					if (this.cardData.length > 15) {
						this.hasMore = false;
					}

				} catch (error) {
					console.error('加载更多数据失败:', error);
					this.showToast('加载失败', 'error');
				} finally {
					this.isLoading = false;
				}
			}
		},

		mounted() {
			setInterval(() => {
				this.currentTime = this.formatTime(new Date());
			}, 60000);
		},

		onReachBottom() {
			this.loadMoreData();
		}
	}
</script>

<style scoped>
	/* 图片相关样式 */
	.single-image-container {
		margin-top: 20rpx;
	}

	.single-image {
		width: 100%;
		height: 300rpx;
		border-radius: 12rpx;
		background-color: #f5f5f5;
	}

	.multi-images-container {
		display: flex;
		gap: 10rpx;
		margin-top: 20rpx;
	}

	.multi-image-item {
		flex: 1;
	}

	.multi-image {
		width: 100%;
		height: 180rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	/* 其他原有样式保持不变 */
	.page-container {
		background: #ffffff;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.top-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 32rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	.nav-scroll {
		flex: 1;
		white-space: nowrap;
	}

	.nav-items {
		display: inline-flex;
		align-items: center;
		gap: 40rpx;
	}

	.nav-item {
		position: relative;
		padding: 16rpx 0;
		cursor: pointer;
	}

	.nav-text {
		font-size: 32rpx;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.8);
		transition: all 0.3s ease;
	}

	.nav-item.active .nav-text {
		color: #ffffff;
		font-weight: 700;
	}

	.nav-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background: #ffffff;
		border-radius: 2rpx;
	}

	.weather-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: 32rpx;
	}

	.weather-temp {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.weather-location {
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.search-bar {
		padding: 20rpx 32rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.search-container {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 50rpx;
		padding: 16rpx 24rpx;
	}

	.search-icon {
		font-size: 32rpx;
		color: #999;
		margin-right: 16rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.search-actions {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-left: 20rpx;
	}

	.search-action {
		font-size: 24rpx;
		color: #1890ff;
		padding: 8rpx 16rpx;
		background: rgba(24, 144, 255, 0.1);
		border-radius: 20rpx;
	}

	.update-notice {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 32rpx;
		background: #f8f9fa;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.notice-text {
		font-size: 26rpx;
		color: #666;
	}

	.notice-time {
		font-size: 24rpx;
		color: #999;
		margin-left: auto;
		margin-right: 20rpx;
	}

	.notice-close {
		font-size: 32rpx;
		color: #999;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #f0f0f0;
	}

	.content-wrapper {
		height: calc(100vh - 400rpx);
		padding: 0 32rpx;
	}

	.content {
		max-width: 800rpx;
		margin: 0 auto;
	}

	.card-wrapper {
		margin-bottom: 24rpx;
	}

	.load-more,
	.no-more {
		text-align: center;
		padding: 32rpx;
		color: #999;
		font-size: 26rpx;
	}

	.load-more-text,
	.no-more-text {
		color: #bfbfbf;
	}

	.ad-section {
		margin-top: 20rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #fff9f9 0%, #fff5f5 100%);
		border-radius: 12rpx;
		border: 1rpx solid #ffecec;
	}

	.ad-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ad-text {
		flex: 1;
	}

	.ad-title {
		display: block;
		font-size: 28rpx;
		color: #ff6b6b;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.ad-desc {
		font-size: 24rpx;
		color: #999;
	}

	.ad-tag {
		font-size: 20rpx;
		color: #999;
		background: #f0f0f0;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.bottom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background: #ffffff;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 0;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tab-icon {
		font-size: 36rpx;
		margin-bottom: 8rpx;
	}

	.tab-text {
		font-size: 20rpx;
		color: #999;
		transition: all 0.3s ease;
	}

	.tab-item.active .tab-text {
		color: #ff6b6b;
		font-weight: 500;
	}

	@media (max-width: 768rpx) {
		.top-navbar {
			padding: 16rpx 24rpx;
		}

		.nav-items {
			gap: 32rpx;
		}

		.nav-text {
			font-size: 28rpx;
		}

		.search-bar {
			padding: 16rpx 24rpx;
		}

		.update-notice {
			padding: 16rpx 24rpx;
		}

		.content-wrapper {
			padding: 0 24rpx;
			height: calc(100vh - 380rpx);
		}
	}
</style>